<template>
	<view>
		<view class="bg" style="width: 100%;height:100%;background-color: rgb(247,247,247)">
			<view class="header">
				<view class="user_details">
					<image src="../../static/head.png" class="head_portrait"></image>
					<text style="font-size: 36rpx;margin-left: 30rpx;">王小二，早上好！</text>
				</view>
				
				<view class="tasks">
					<view class="fix">
						<text class="number">5</text>
						<text style="font-size:24rpx;color: #333333;">维保任务</text>
					</view>
					<view class="save">
						<text class="number">1</text>
						<text style="font-size:24rpx;color: #333333;">救援任务</text>
					</view>
				</view>
			
			</view>
			<view class="title2">任务信息</view>
			<view class="content" id="task_list">
				<text style="font-size: 30rpx;">迅驰大厦</text>
				<text style="font-size: 24rpx;">金牛区 抚琴街道营门口路45号</text>
				<text style="font-size: 24rpx;">例行维保</text>
				<text style="font-size: 20rpx;">12-03 16:00</text>
				<view class="state" style="color: #c4cece;margin-left: 80%;">任务中</view>
			</view>
			<view @click="tasking" class="content"  id="task_list" >
				<text  style="font-size: 30rpx;" >迅驰大厦</text>
				<text style="font-size: 24rpx;">金牛区 抚琴街道营门口路45号</text>
				<text style="font-size: 24rpx;">例行维保</text>
				<text style="font-size: 20rpx;">12-03 16:00</text>
				<view class="state" style="color: #00CE47;margin-left: 80%;">任务中</view>
			</view>
			<view @click="complete" class="content" id="task_list">
				<text style="font-size: 30rpx;">迅驰大厦</text>
				<text style="font-size: 24rpx;">金牛区 抚琴街道营门口路45号</text>
				<text style="font-size: 24rpx;">例行维保</text>
				<text style="font-size: 20rpx;">12-03 16:00</text>
				<view class="state" style="color: #000000;margin-left: 80%;">已完成</view>
			</view>
			<view @click="timeout" class="content" id="task_list">
				<text style="font-size: 30rpx;">迅驰大厦</text>
				<view class="state" style="color: #FF0000;margin-left: 80%;">已超时</view>
				
				<text style="font-size: 24rpx;">金牛区 抚琴街道营门口路45号</text>
				<text style="font-size: 24rpx;">例行维保</text>
				<text style="font-size: 20rpx;">12-03 16:00</text>
			</view>
		</view>
		
	</view>

</template>

<script>
	export default {
		data() {
			return {};
		},
		methods: {
			tasking(){
				uni.navigateTo({
					url:'./details/content_details'
				})
			},
			timeout(){
				uni.navigateTo({
					url:'./details/timeout'
				})
			},
			complete(){
				uni.navigateTo({
					url:'./details/complete'
				})
			}
		}
	}
</script>

<style lang="scss">
	.header {
		display: flex;
		justify-content: center;
		position: relative;
		background:url("@/static/header_bg.png");
		color: #FFFFFF;
		font-size: 20px;
		flex-direction: row;
		width: 100%;
		height: 150px;
		
		.user_details{
			width: 100%;
			height: 160rpx;
			padding-bottom: 20rpx;
			vertical-align: middle;
		
		}
		.head_portrait {
			width: 150rpx;
			height: 150rpx;
			vertical-align: middle;
			margin-left: 30rpx;
			border-radius: 50%;
		}
	}

	.tasks {
		position: absolute;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 90%;
		height: 150rpx;
		align-items: center;
		text-align: center;
		border-radius: 5px 5px 0 0;
		margin-top: 150rpx;
		background-color: #FFFFFF;

		.fix {
			display: flex;
			flex-direction: column;
			width: 50%;
			height: 100%;
			color: #000000;
		}

		.save {
			display: flex;
			flex-direction: column;
			width: 50%;
			height: 100%;
			color: #000000;
		}

		text {
			display: flex;
			padding: 10px 0;
			justify-content: center;
		}
	}

	.title2 {
		margin-left: 10px;
		margin-top: 100rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #000000;
	}

	.content {
		display: flex;
		flex-direction: column;
		width: 90%;
		margin:20rpx auto;
		
		background-color: #FFFFFF;
		border-radius: 5px;
		box-shadow: 1px #C0C0C0;
		height: 230rpx;
		text{
			padding: 10rpx 20rpx;
		}
	}
</style>
